<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.sass</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (SASS) - Theme (Breeze Dark)"/>
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
html,
body,
ul,
ol
  <span style="font-weight:bold;">margin</span>:  <span style="color:#f67400;">0</span>
  <span style="font-weight:bold;">padding</span>: <span style="color:#f67400;">0</span>

<span style="color:#27ae60;">@import</span> reset
body
  <span style="font-weight:bold;">font</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span> Helvetica, <span style="color:#f67400;">sans-serif</span>
  <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">#efefef</span>

<span style="color:#27aeae;">$font-stack</span>:    Helvetica, <span style="color:#f67400;">sans-serif</span>
<span style="color:#27aeae;">$primary-color</span>: <span style="color:#27aeae;font-weight:bold;">#333</span>

body
  <span style="font-weight:bold;">font</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span> <span style="color:#27aeae;">$font-stack</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$primary-color</span>
<span style="color:#8e44ad;">.container</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>

article<span style="color:#0099ff;font-weight:bold;">[role</span>=<span style="color:#f44f4f;">&quot;main&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>
  <span style="font-weight:bold;">float</span>: <span style="color:#f67400;">left</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">600</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">960</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>

<span style="color:#7f8c8d;">%message-shared</span>
  <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span> <span style="color:#27aeae;font-weight:bold;">#ccc</span>
  <span style="font-weight:bold;">padding</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#333</span>

<span style="color:#8e44ad;">.message</span>
  <span style="color:#27ae60;">@extend</span> <span style="color:#7f8c8d;">%message-shared</span>

<span style="color:#8e44ad;">.success</span>
  <span style="color:#27ae60;">@extend</span> <span style="color:#7f8c8d;">%message-shared</span>
  <span style="font-weight:bold;">border-color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>

<span style="color:#27ae60;">=</span><span style="color:#8e44ad;">transform</span>(<span style="color:#27aeae;">$property</span>)
  <span style="font-weight:bold;">-webkit-transform</span>: <span style="color:#27aeae;">$property</span>
  <span style="font-weight:bold;">-ms-transform</span>: <span style="color:#27aeae;">$property</span>
  <span style="font-weight:bold;">transform</span>: <span style="color:#27aeae;">$property</span>
<span style="color:#8e44ad;">.box</span>
  <span style="color:#27ae60;">+</span><span style="color:#8e44ad;">transform(rotate(</span><span style="color:#f67400;">30</span><span style="color:#2980b9;">deg</span><span style="color:#8e44ad;">))</span>

  <span style="color:#7a7c7d;">// This comment won't be included in the CSS.</span>
<span style="color:#7a7c7d;">   This is also commented out.</span>
  <span style="color:#27ae60;font-weight:bold;">#a</span>
<span style="color:#7a7c7d;">/* But this comment will, except in compressed mode.</span>

<span style="color:#7a7c7d;">/* It can also contain interpolation:</span>
<span style="color:#7a7c7d;">   1 + 1 = #{1 + 1}</span>
<span style="color:#7a7c7d;">  1 + 1 = #{1 + 1}</span>
<span style="color:#7a7c7d;"> 1 + 1 = #{1 + 1}</span>
<span style="color:#27ae60;font-weight:bold;">#a</span>

<span style="color:#7a7c7d;">// But this comment will, except in compressed mode.</span>

<span style="color:#7a7c7d;">// It can also contain interpolation:</span>
<span style="color:#7a7c7d;">   1 + 1 = #{1 + 1}</span>
<span style="color:#7a7c7d;">  1 + 1 = #{1 + 1}</span>
<span style="color:#7a7c7d;"> 1 + 1 = #{1 + 1}</span>
<span style="color:#27ae60;font-weight:bold;">#a</span>

<span style="color:#7a7c7d;">/*! This comment will be included even in compressed mode.</span>

<span style="color:#27ae60;font-weight:bold;">#a</span>

<span style="color:#7a7c7d;">/**/</span>

p <span style="color:#8e44ad;">.sans</span>
  <span style="font-weight:bold;">font</span>: Helvetica, <span style="color:#7a7c7d;">/* Inline comments must be closed. */</span> <span style="color:#f67400;">sans-serif</span>

p <span style="color:#8e44ad;">.sans</span>
  <span style="font-weight:bold;">font</span><span style="color:#7a7c7d;">/*comment*/</span>: Helvetica, <span style="color:#7a7c7d;">/* Inline comments must be closed. */</span> <span style="color:#f67400;">sans-serif</span> <span style="color:#7a7c7d;">// comment</span>

<span style="color:#7a7c7d;">/// Computes an exponent.</span>
<span style="color:#7a7c7d;">///</span>
<span style="color:#7a7c7d;">/// @param {number} $base</span>
<span style="color:#7a7c7d;">///   The number to multiply by itself.</span>
<span style="color:#7a7c7d;">/// @param {integer (unitless)} $exponent</span>
<span style="color:#7a7c7d;">///   The number of `$base`s to multiply together.</span>
<span style="color:#7a7c7d;">/// @return {number} `$base` to the power of `$exponent`.</span>
<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">pow</span>(<span style="color:#27aeae;">$base</span>, <span style="color:#27aeae;">$exponent</span>)
  <span style="color:#27aeae;">$result</span>: <span style="color:#f67400;">1</span>
  <span style="color:#27ae60;">@for</span> <span style="color:#27aeae;">$_</span> from <span style="color:#f67400;">1</span> through <span style="color:#27aeae;">$exponent</span>
    <span style="color:#27aeae;">$result</span>: <span style="color:#27aeae;">$result</span> * <span style="color:#27aeae;">$base</span>

  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$result</span>

<span style="color:#27aeae;">$roboto-font-path</span>: <span style="color:#f44f4f;">&quot;../fonts/roboto&quot;</span>

<span style="color:#27ae60;">@font-face</span>
    <span style="color:#7a7c7d;">// This is parsed as a normal function call that takes a quoted string.</span>
    src: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;</span>#{<span style="color:#27aeae;">$roboto-font-path</span>}<span style="color:#f44f4f;">/Roboto-Thin.woff2&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff2&quot;</span><span style="color:#8e44ad;">)</span>
    src: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">$roboto-font-path + &quot;/Roboto-Light.woff2&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff2&quot;</span><span style="color:#8e44ad;">)</span>
    src: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">#{$roboto-font-path}/Roboto-Regular.woff2</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff2&quot;</span><span style="color:#8e44ad;">)</span>

    <span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Roboto&quot;</span>
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">100</span>

<span style="color:#8e44ad;">.logo</span>
  <span style="color:#27aeae;">$width</span>: <span style="color:#f67400;">800</span><span style="color:#2980b9;">px</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$width</span>
  <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">absolute</span>
  <span style="font-weight:bold;">left</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> - #{<span style="color:#27aeae;">$width</span> / <span style="color:#f67400;">2</span>}<span style="color:#8e44ad;">)</span>
  <span style="font-weight:bold;">top</span>: <span style="color:#f67400;">0</span>

<span style="color:#27aeae;">$padding</span>: <span style="color:#f67400;">12</span><span style="color:#2980b9;">px</span>

<span style="color:#8e44ad;">.post</span>
  <span style="color:#7a7c7d;">// Since these max() calls don't use any Sass features other than</span>
  <span style="color:#7a7c7d;">// interpolation, they're compiled to CSS max() calls.</span>
  <span style="font-weight:bold;">padding-left</span>: <span style="color:#8e44ad;">max(</span>#{<span style="color:#27aeae;">$padding</span>}, <span style="color:#8e44ad;">env(</span>safe-area-inset-left<span style="color:#8e44ad;">))</span>
  <span style="font-weight:bold;">padding-right</span>: <span style="color:#8e44ad;">max(</span>#{<span style="color:#27aeae;">$padding</span>}, <span style="color:#8e44ad;">env(</span>safe-area-inset-right<span style="color:#8e44ad;">))</span>


<span style="color:#8e44ad;">.sidebar</span>
  <span style="color:#7a7c7d;">// Since these refer to a Sass variable without interpolation, they call</span>
  <span style="color:#7a7c7d;">// Sass's built-in max() function.</span>
  <span style="font-weight:bold;">padding-left</span>: <span style="color:#8e44ad;">max(</span><span style="color:#27aeae;">$padding</span>, <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>
  <span style="font-weight:bold;">padding-right</span>: <span style="color:#8e44ad;">max(</span><span style="color:#27aeae;">$padding</span>, <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>

<span style="color:#8e44ad;">.circle</span>
  <span style="color:#27aeae;">$size</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$size</span>
  <span style="font-weight:bold;">height</span>: <span style="color:#27aeae;">$size</span>
  <span style="font-weight:bold;">border-radius</span>: <span style="color:#27aeae;">$size</span> / <span style="color:#f67400;">2</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">prefix</span>(<span style="color:#27aeae;">$property</span>, <span style="color:#27aeae;">$value</span>, <span style="color:#27aeae;">$prefixes</span>)
  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$prefix</span> in <span style="color:#27aeae;">$prefixes</span>
    -#{<span style="color:#27aeae;">$prefix</span>}-#{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$value</span>

  #{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$value</span>


<span style="color:#8e44ad;">.gray</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">prefix(</span>filter, <span style="color:#8e44ad;">grayscale(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span>, moz webkit<span style="color:#8e44ad;">)</span>

<span style="color:#8e44ad;">.enlarge</span>
  <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">14</span><span style="color:#2980b9;">px</span>
  <span style="font-weight:bold;">transition</span>:
    <span style="font-weight:bold;">property</span>: font-size
    <span style="font-weight:bold;">duration</span>: <span style="color:#f67400;">4</span><span style="color:#2980b9;">s</span>
    <span style="font-weight:bold;">delay</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">s</span>

  &amp;<span style="color:#c45b00;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">36</span><span style="color:#2980b9;">px</span>

<span style="color:#8e44ad;">.info-page</span>
  <span style="font-weight:bold;">margin</span>: <span style="color:#7f8c8d;">auto</span>
    <span style="font-weight:bold;">bottom</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>
    <span style="font-weight:bold;">top</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>

<span style="color:#27aeae;">$rounded-corners</span>: <span style="color:#7f8c8d;">false</span>

<span style="color:#8e44ad;">.button</span>
  <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span> <span style="color:#27aeae;font-weight:bold;">black</span>
  <span style="font-weight:bold;">border-radius</span>: <span style="color:#8e44ad;">if(</span><span style="color:#27aeae;">$rounded-corners</span>, <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span>, <span style="color:#7f8c8d;">null</span><span style="color:#8e44ad;">)</span>

<span style="color:#27aeae;">$primary</span>: <span style="color:#27aeae;font-weight:bold;">#81899b</span>
<span style="color:#27aeae;">$accent</span>: <span style="color:#27aeae;font-weight:bold;">#ab2e</span>
<span style="color:#27aeae;">$warn</span>: <span style="color:#27aeae;font-weight:bold;">#dfa612aa</span>

<span style="color:#c45b00;font-style:italic;">:root</span>
  <span style="color:#27aeae;">--primary</span>: #{<span style="color:#27aeae;">$primary</span>}
  <span style="color:#27aeae;">--accent</span>: #{<span style="color:#27aeae;">$accent</span>}
  <span style="color:#27aeae;">--warn</span>: #{<span style="color:#27aeae;">$warn</span>}

  <span style="color:#7a7c7d;">// Even though this looks like a Sass variable, it's valid CSS so it's not</span>
  <span style="color:#7a7c7d;">// evaluated.</span>
  <span style="color:#27aeae;">--consumed-by-js</span>: <span style="color:#27aeae;">$primary</span>

<span style="color:#27aeae;">$font-family-sans-serif</span>: -apple-system, BlinkMacSystemFont, <span style="color:#f44f4f;">&quot;Segoe UI&quot;</span>, Roboto
<span style="color:#27aeae;">$font-family-monospace</span>: SFMono-Regular, Menlo, Monaco, Consolas

<span style="color:#c45b00;font-style:italic;">:root</span>
  <span style="color:#27aeae;">--font-family-sans-serif</span>: #{<span style="color:#8e44ad;">inspect(</span><span style="color:#27aeae;">$font-family-sans-serif</span><span style="color:#8e44ad;">)</span>}
  <span style="color:#27aeae;">--font-family-monospace</span>: #{<span style="color:#8e44ad;">inspect(</span><span style="color:#27aeae;">$font-family-monospace</span><span style="color:#8e44ad;">)</span>}

<span style="color:#8e44ad;">.alert</span>
  <span style="color:#7a7c7d;">// The parent selector can be used to add pseudo-classes to the outer</span>
  <span style="color:#7a7c7d;">// selector.</span>
  &amp;<span style="color:#c45b00;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>


  <span style="color:#7a7c7d;">// It can also be used to style the outer selector in a certain context, such</span>
  <span style="color:#7a7c7d;">// as a body set to use a right-to-left language.</span>
  <span style="color:#0099ff;font-weight:bold;">[dir</span>=<span style="color:#f44f4f;">rtl</span><span style="color:#0099ff;font-weight:bold;">]</span> &amp;
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span>
    <span style="font-weight:bold;">margin-right</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>


  <span style="color:#7a7c7d;">// You can even use it as an argument to pseudo-class selectors.</span>
  <span style="color:#c45b00;font-style:italic;">:not(</span><span style="color:#da4453;text-decoration:underline;">&amp;</span><span style="color:#c45b00;font-style:italic;">)</span>
    <span style="font-weight:bold;">opacity</span>: <span style="color:#f67400;">0.8</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">unify-parent</span>(<span style="color:#27aeae;">$child</span>)
  <span style="color:#27ae60;">@at-root</span> #{<span style="color:#8e44ad;">selector-unify(</span>&amp;, <span style="color:#27aeae;">$child</span><span style="color:#8e44ad;">)</span>}
    <span style="color:#27ae60;">@content</span>



<span style="color:#8e44ad;">.wrapper</span> <span style="color:#8e44ad;">.field</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">unify-parent(</span><span style="color:#f44f4f;">&quot;input&quot;</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">app-background</span>(<span style="color:#27aeae;">$color</span>)
  #{<span style="color:#8e44ad;">if(</span>&amp;, <span style="color:#f44f4f;">'&amp;.app-background'</span>, <span style="color:#f44f4f;">'.app-background'</span><span style="color:#8e44ad;">)</span>}
    <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;">$color</span>
    <span style="font-weight:bold;">color</span>: <span style="color:#8e44ad;">rgba(</span><span style="color:#27aeae;font-weight:bold;">#fff</span>, <span style="color:#f67400;">0.75</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">app-background(</span><span style="color:#27aeae;font-weight:bold;">#036</span><span style="color:#8e44ad;">)</span>

<span style="color:#8e44ad;">.sidebar</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">app-background(</span><span style="color:#27aeae;font-weight:bold;">#c6538c</span><span style="color:#8e44ad;">)</span>

<span style="color:#8e44ad;">.accordion</span>
  <span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">600</span><span style="color:#2980b9;">px</span>
  <span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">4</span><span style="color:#2980b9;">rem</span> <span style="color:#7f8c8d;">auto</span>

  &amp;__copy
    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">none</span>
    <span style="font-weight:bold;">padding</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">rem</span> <span style="color:#f67400;">1.5</span><span style="color:#2980b9;">rem</span> <span style="color:#f67400;">2</span><span style="color:#2980b9;">rem</span> <span style="color:#f67400;">1.5</span><span style="color:#2980b9;">rem</span>
    <span style="font-weight:bold;">line-height</span>: <span style="color:#f67400;">1.6</span>
    <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">14</span><span style="color:#2980b9;">px</span>

    &amp;--open
      <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">block</span>


<span style="color:#8e44ad;">.alert</span><span style="color:#c45b00;font-style:italic;">:hover</span>, <span style="color:#7f8c8d;">%strong-alert</span>
  <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>

<span style="color:#7f8c8d;">%strong-alert</span><span style="color:#c45b00;font-style:italic;">:hover</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>

<span style="color:#7f8c8d;">%toolbelt</span>
  <span style="font-weight:bold;">box-sizing</span>: <span style="color:#f67400;">border-box</span>
  <span style="font-weight:bold;">border-top</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#27aeae;font-weight:bold;">#000</span>, <span style="color:#f67400;">.12</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">solid</span>

  &amp;<span style="color:#c45b00;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#27aeae;font-weight:bold;">#000</span>, <span style="color:#f67400;">.5</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">solid</span>

<span style="color:#8e44ad;">.action-buttons</span>
  <span style="color:#27ae60;">@extend</span> <span style="color:#7f8c8d;">%toolbelt</span>
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#4285f4</span>

<span style="color:#27aeae;">$border-dark</span>: <span style="color:#8e44ad;">rgba(</span><span style="color:#27aeae;">$base-color</span>, <span style="color:#f67400;">0.88</span><span style="color:#8e44ad;">)</span>
<span style="color:#27aeae;">$black</span>: <span style="color:#27aeae;font-weight:bold;">#000</span> <span style="color:#2980b9;">!default</span>
<span style="color:#27aeae;">$border-radius</span>: <span style="color:#f67400;">0.25</span><span style="color:#2980b9;">rem</span> <span style="color:#2980b9;">!default</span>
<span style="color:#27aeae;">$box-shadow</span>: <span style="color:#f67400;">0</span> <span style="color:#f67400;">0.5</span><span style="color:#2980b9;">rem</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">rem</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#27aeae;">$black</span>, <span style="color:#f67400;">0.15</span><span style="color:#8e44ad;">)</span> <span style="color:#2980b9;">!default</span>
<span style="color:#27aeae;">$box-shadow</span>: <span style="color:#f67400;">0</span> <span style="color:#f67400;">0.5</span><span style="color:#2980b9;">rem</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">rem</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#27aeae;">$black</span>, <span style="color:#8e44ad;">blue(</span><span style="color:#27aeae;">$black</span><span style="color:#8e44ad;">))</span> <span style="color:#2980b9;">!default</span>
<span style="color:#27aeae;">$border-radius</span>: <span style="color:#f67400;">0.1</span><span style="color:#2980b9;">rem</span>

<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">'library'</span>

<span style="color:#27aeae;">$global-variable</span>: global value

  <span style="color:#7a7c7d;">// This would fail, because $local-variable isn't in scope:</span>
  <span style="color:#7a7c7d;">// local: $local-variable</span>

<span style="color:#27aeae;">$theme-colors</span>: (<span style="color:#f44f4f;">&quot;success&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#28a745</span>, <span style="color:#f44f4f;">&quot;info&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#17a2b8</span>, <span style="color:#f44f4f;">&quot;warning&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#ffc107</span>)

<span style="color:#8e44ad;">.alert</span>
  <span style="color:#7a7c7d;">// Instead of $theme-color-#{warning}</span>
  <span style="font-weight:bold;">background-color</span>: <span style="color:#8e44ad;">map-get(</span><span style="color:#27aeae;">$theme-colors</span>, <span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">corner-icon</span>(<span style="color:#27aeae;">$name</span>, <span style="color:#27aeae;">$top-or-bottom</span>, <span style="color:#27aeae;">$left-or-right</span>)
  <span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>}
    <span style="font-weight:bold;">background-image</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/icons/</span>#{<span style="color:#27aeae;">$name</span>}<span style="color:#f44f4f;">.svg&quot;</span><span style="color:#8e44ad;">)</span>
    <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">absolute</span>
    #{<span style="color:#27aeae;">$top-or-bottom</span>}: <span style="color:#f67400;">0</span>
    #{<span style="color:#27aeae;">$left-or-right</span>}: <span style="color:#f67400;">0</span>

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">corner-icon(</span><span style="color:#f44f4f;">&quot;mail&quot;</span>, <span style="color:#f67400;">top</span>, <span style="color:#f67400;">right</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">inline-animation</span>(<span style="color:#27aeae;">$duration</span>)
  <span style="color:#27aeae;">$name</span>: inline-#{<span style="color:#8e44ad;">unique-id()</span>}

  <span style="color:#27ae60;">@keyframes</span> #{$name}
    <span style="color:#27ae60;">@content</span>

  <span style="font-weight:bold;">animation-name</span>: <span style="color:#27aeae;">$name</span>
  <span style="font-weight:bold;">animation-duration</span>: <span style="color:#27aeae;">$duration</span>
  <span style="font-weight:bold;">animation-iteration-count</span>: <span style="color:#f67400;">infinite</span>


<span style="color:#8e44ad;">.pulse</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">inline-animation(</span><span style="color:#f67400;">2</span><span style="color:#2980b9;">s</span><span style="color:#8e44ad;">)</span>
    from
      <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">yellow</span>
    to
      <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>

<span style="color:#8e44ad;">.example</span>
  unquoted: #{<span style="color:#f44f4f;">&quot;string&quot;</span>}

  &amp; &amp;
    <span style="font-weight:bold;">padding</span>:
      <span style="font-weight:bold;">bottom</span>: <span style="color:#f67400;">0</span>
      <span style="font-weight:bold;">left</span>: <span style="color:#f67400;">0</span>

<span style="color:#7a7c7d;">// style.sass</span>
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">'foundation/code'</span>, <span style="color:#f44f4f;">'foundation/lists'</span>

<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;theme.css&quot;</span>
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;http://fonts.googleapis.com/css?family=Droid+Sans&quot;</span>
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">theme</span><span style="color:#8e44ad;">)</span>
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;landscape&quot;</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>)

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">google-font</span>(<span style="color:#27aeae;">$family</span>)
  <span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;http://fonts.googleapis.com/css?family=</span>#{<span style="color:#27aeae;">$family</span>}<span style="color:#f44f4f;">&quot;</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">google-font(</span><span style="color:#f44f4f;">&quot;Droid Sans&quot;</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">horizontal-list</span>
  <span style="color:#27ae60;">@include</span> reset-list

  li
    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">inline-block</span>
    <span style="font-weight:bold;">margin</span>:
      <span style="font-weight:bold;">left</span>: -<span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>
      <span style="font-weight:bold;">right</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">em</span>

nav ul
  <span style="color:#27ae60;">@include</span> horizontal-list

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">rtl</span>(<span style="color:#27aeae;">$property</span>, <span style="color:#27aeae;">$ltr-value</span>, <span style="color:#27aeae;">$rtl-value</span>)
  #{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$ltr-value</span>

  <span style="color:#0099ff;font-weight:bold;">[dir</span>=<span style="color:#f44f4f;">rtl</span><span style="color:#0099ff;font-weight:bold;">]</span> &amp;
    #{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$rtl-value</span>

<span style="color:#8e44ad;">.sidebar</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">rtl(</span>float, <span style="color:#f67400;">left</span>, <span style="color:#f67400;">right</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">replace-text</span>(<span style="color:#27aeae;">$image</span>, <span style="color:#27aeae;">$x</span><span style="color:#da4453;text-decoration:underline;">:</span> <span style="color:#da4453;text-decoration:underline;">50%</span>, <span style="color:#27aeae;">$y</span><span style="color:#da4453;text-decoration:underline;">:</span> <span style="color:#da4453;text-decoration:underline;">50%</span>)
  <span style="font-weight:bold;">text-indent</span>: -<span style="color:#f67400;">99999</span><span style="color:#2980b9;">em</span>
  <span style="font-weight:bold;">overflow</span>: <span style="color:#f67400;">hidden</span>
  <span style="font-weight:bold;">text-align</span>: <span style="color:#f67400;">left</span>

  <span style="font-weight:bold;">background</span>:
    <span style="font-weight:bold;">image</span>: <span style="color:#27aeae;">$image</span>
    <span style="font-weight:bold;">repeat</span>: <span style="color:#f67400;">no-repeat</span>
    <span style="font-weight:bold;">position</span>: <span style="color:#27aeae;">$x</span> <span style="color:#27aeae;">$y</span>

<span style="color:#8e44ad;">.mail-icon</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">replace-text(url(</span><span style="color:#f44f4f;">&quot;/images/mail.svg&quot;</span><span style="color:#8e44ad;">)</span>, <span style="color:#f67400;">0</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">order(</span><span style="color:#f67400;">150</span><span style="color:#2980b9;">px</span>, <span style="color:#f44f4f;">&quot;input.name&quot;</span>, <span style="color:#f44f4f;">&quot;input.address&quot;</span>, <span style="color:#f44f4f;">&quot;input.zip&quot;</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">syntax-colors</span>(<span style="color:#27aeae;">$args</span>...)
  <span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">keywords(</span><span style="color:#27aeae;">$args</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// (string: #080, comment: #800, $variable: $60b)</span>

  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$name</span>, <span style="color:#27aeae;">$color</span> in <span style="color:#8e44ad;">keywords(</span><span style="color:#27aeae;">$args</span><span style="color:#8e44ad;">)</span>
    pre span<span style="color:#8e44ad;">.stx-</span>#{<span style="color:#27aeae;">$name</span>}
      <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$color</span>

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">syntax-colors(</span><span style="color:#27aeae;">$string</span>: <span style="color:#27aeae;font-weight:bold;">#080</span>, <span style="color:#27aeae;">$comment</span>: <span style="color:#27aeae;font-weight:bold;">#800</span>, <span style="color:#27aeae;">$variable</span>: <span style="color:#27aeae;font-weight:bold;">#60b</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">media</span>(<span style="color:#27aeae;">$types</span>...)
  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$type</span> in <span style="color:#27aeae;">$types</span>
    <span style="color:#27ae60;">@media</span> #{<span style="color:#27aeae;">$type</span>}
      <span style="color:#27ae60;">@content</span>(<span style="color:#27aeae;">$type</span>)

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">media(</span>screen, print<span style="color:#8e44ad;">)</span> using (<span style="color:#27aeae;">$type</span>)
  h1
    <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">40</span><span style="color:#2980b9;">px</span>
    <span style="color:#27ae60;">@if</span> <span style="color:#27aeae;">$type</span> == print
      <span style="font-weight:bold;">font-family</span>: Calluna

<span style="color:#27ae60;">=</span><span style="color:#8e44ad;">reset-list</span>
  <span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">0</span>
  <span style="font-weight:bold;">padding</span>: <span style="color:#f67400;">0</span>
  <span style="font-weight:bold;">list-style</span>: <span style="color:#f67400;">none</span>

<span style="color:#27ae60;">=</span><span style="color:#8e44ad;">horizontal-list</span>
  <span style="color:#27ae60;">+</span>reset-list

  li
    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">inline-block</span>
    <span style="font-weight:bold;">margin</span>:
      <span style="font-weight:bold;">left</span>: -<span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>
      <span style="font-weight:bold;">right</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">em</span>

nav ul
  <span style="color:#27ae60;">+</span>horizontal-list
<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">pow</span>(<span style="color:#27aeae;">$base</span>, <span style="color:#27aeae;">$exponent</span>)
  <span style="color:#27aeae;">$result</span>: <span style="color:#f67400;">1</span>
  <span style="color:#27ae60;">@for</span> <span style="color:#27aeae;">$_</span> from <span style="color:#f67400;">1</span> through <span style="color:#27aeae;">$exponent</span>
    <span style="color:#27aeae;">$result</span>: <span style="color:#27aeae;">$result</span> * <span style="color:#27aeae;">$base</span>

  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$result</span>

<span style="color:#8e44ad;">.sidebar</span>
  <span style="font-weight:bold;">float</span>: <span style="color:#f67400;">left</span>
  <span style="font-weight:bold;">margin-left</span>: <span style="color:#8e44ad;">pow(</span><span style="color:#f67400;">4</span>, <span style="color:#f67400;">3</span><span style="color:#8e44ad;">)</span> * <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span>

<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">sum</span>(<span style="color:#27aeae;">$numbers</span>...)
  <span style="color:#27aeae;">$sum</span>: <span style="color:#f67400;">0</span>
  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$number</span> in <span style="color:#27aeae;">$numbers</span>
    <span style="color:#27aeae;">$sum</span>: <span style="color:#27aeae;">$sum</span> + <span style="color:#27aeae;">$number</span>

  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$sum</span>

<span style="color:#8e44ad;">.micro</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">sum(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>
<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">str-insert</span>(<span style="color:#27aeae;">$string</span>, <span style="color:#27aeae;">$insert</span>, <span style="color:#27aeae;">$index</span>)
  <span style="color:#7a7c7d;">// Avoid making new strings if we don't need to.</span>
  <span style="color:#27ae60;">@if</span> <span style="color:#8e44ad;">str-length(</span><span style="color:#27aeae;">$string</span><span style="color:#8e44ad;">)</span> == <span style="color:#f67400;">0</span>
    <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$insert</span>

  <span style="color:#27aeae;">$before</span>: <span style="color:#8e44ad;">str-slice(</span><span style="color:#27aeae;">$string</span>, <span style="color:#f67400;">0</span>, <span style="color:#27aeae;">$index</span><span style="color:#8e44ad;">)</span>
  <span style="color:#27aeae;">$after</span>: <span style="color:#8e44ad;">str-slice(</span><span style="color:#27aeae;">$string</span>, <span style="color:#27aeae;">$index</span><span style="color:#8e44ad;">)</span>
  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$before</span> + <span style="color:#27aeae;">$insert</span> + <span style="color:#27aeae;">$after</span>

<span style="color:#8e44ad;">.error</span>
  <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#27aeae;font-weight:bold;">#f00</span>
  <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">#fdd</span>

  &amp;--serious
    <span style="color:#27ae60;">@extend</span> <span style="color:#8e44ad;">.error</span>
    <span style="font-weight:bold;">border-width</span>: <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">reflexive-position</span>(<span style="color:#27aeae;">$property</span>, <span style="color:#27aeae;">$value</span>)
  <span style="color:#27ae60;">@if</span> <span style="color:#27aeae;">$property</span> <span style="color:#2980b9;">!</span>= <span style="color:#f67400;">left</span> and <span style="color:#27aeae;">$property</span> <span style="color:#2980b9;">!</span>= <span style="color:#f67400;">right</span>
    <span style="color:#27ae60;">@error</span> <span style="color:#f44f4f;">&quot;Property </span>#{<span style="color:#27aeae;">$property</span>}<span style="color:#f44f4f;"> must be either left or right.&quot;</span>

  <span style="color:#27aeae;">$left-value</span>: <span style="color:#8e44ad;">if(</span><span style="color:#27aeae;">$property</span> == <span style="color:#f67400;">right</span>, initial, <span style="color:#27aeae;">$value</span><span style="color:#8e44ad;">)</span>
  <span style="color:#27aeae;">$right-value</span>: <span style="color:#8e44ad;">if(</span><span style="color:#27aeae;">$property</span> == <span style="color:#f67400;">right</span>, <span style="color:#27aeae;">$value</span>, initial<span style="color:#8e44ad;">)</span>

  <span style="font-weight:bold;">left</span>: <span style="color:#27aeae;">$left-value</span>
  <span style="font-weight:bold;">right</span>: <span style="color:#27aeae;">$right-value</span>
  <span style="color:#0099ff;font-weight:bold;">[dir</span>=<span style="color:#f44f4f;">rtl</span><span style="color:#0099ff;font-weight:bold;">]</span> &amp;
    <span style="font-weight:bold;">left</span>: <span style="color:#27aeae;">$right-value</span>
    <span style="font-weight:bold;">right</span>: <span style="color:#27aeae;">$left-value</span>

<span style="color:#27aeae;">$known-prefixes</span>: webkit, moz, ms, o

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">prefix</span>(<span style="color:#27aeae;">$property</span>, <span style="color:#27aeae;">$value</span>, <span style="color:#27aeae;">$prefixes</span>)
  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$prefix</span> in <span style="color:#27aeae;">$prefixes</span>
    <span style="color:#27ae60;">@if</span> not <span style="color:#8e44ad;">index(</span><span style="color:#27aeae;">$known-prefixes</span>, <span style="color:#27aeae;">$prefix</span><span style="color:#8e44ad;">)</span>
      <span style="color:#27ae60;">@warn</span> <span style="color:#f44f4f;">&quot;Unknown prefix </span>#{<span style="color:#27aeae;">$prefix</span>}<span style="color:#f44f4f;">.&quot;</span>


    -#{<span style="color:#27aeae;">$prefix</span>}-#{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$value</span>

  #{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$value</span>


<span style="color:#8e44ad;">.tilt</span>
  <span style="color:#7a7c7d;">// Oops, we typo'd &quot;webkit&quot; as &quot;wekbit&quot;!</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">prefix(</span>transform, <span style="color:#8e44ad;">rotate(</span><span style="color:#f67400;">15</span><span style="color:#2980b9;">deg</span><span style="color:#8e44ad;">)</span>, wekbit ms<span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">inset-divider-offset</span>(<span style="color:#27aeae;">$offset</span>, <span style="color:#27aeae;">$padding</span>)
  <span style="color:#27aeae;">$divider-offset</span>: (<span style="color:#f67400;">2</span> * <span style="color:#27aeae;">$padding</span>) + <span style="color:#27aeae;">$offset</span>
  <span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;divider offset: </span>#{<span style="color:#27aeae;">$divider-offset</span>}<span style="color:#f44f4f;">&quot;</span>

  <span style="font-weight:bold;">margin-left</span>: <span style="color:#27aeae;">$divider-offset</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span> - #{<span style="color:#27aeae;">$divider-offset</span>}<span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">unify-parent</span>(<span style="color:#27aeae;">$child</span>)
  <span style="color:#27ae60;">@at-root</span> #{<span style="color:#8e44ad;">selector-unify(</span>&amp;, <span style="color:#27aeae;">$child</span><span style="color:#8e44ad;">)</span>}
    <span style="color:#27ae60;">@content</span>


<span style="color:#8e44ad;">.square-av</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">avatar(</span><span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>, <span style="color:#27aeae;">$circle</span>: <span style="color:#7f8c8d;">false</span><span style="color:#8e44ad;">)</span>
<span style="color:#8e44ad;">.circle-av</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">avatar(</span><span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>, <span style="color:#27aeae;">$circle</span>: <span style="color:#7f8c8d;">true</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">theme-colors</span>(<span style="color:#27aeae;">$light-theme</span><span style="color:#da4453;text-decoration:underline;">:</span> <span style="color:#da4453;text-decoration:underline;">true</span>)
  <span style="color:#27ae60;">@if</span> <span style="color:#27aeae;">$light-theme</span>
    <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;">$light-background</span>
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$light-text</span>
  <span style="color:#27ae60;">@else</span>
    <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;">$dark-background</span>
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$dark-text</span>

<span style="color:#8e44ad;">.banner</span>
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">theme-colors(</span><span style="color:#27aeae;">$light-theme</span>: <span style="color:#7f8c8d;">true</span><span style="color:#8e44ad;">)</span>
  body<span style="color:#8e44ad;">.dark</span> &amp;
    <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">theme-colors(</span><span style="color:#27aeae;">$light-theme</span>: <span style="color:#7f8c8d;">false</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">triangle</span>(<span style="color:#27aeae;">$size</span>, <span style="color:#27aeae;">$color</span>, <span style="color:#27aeae;">$direction</span>)
  <span style="font-weight:bold;">height</span>: <span style="color:#f67400;">0</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">0</span>

  <span style="font-weight:bold;">border-color</span>: <span style="color:#f67400;">transparent</span>
  <span style="font-weight:bold;">border-style</span>: <span style="color:#f67400;">solid</span>
  <span style="font-weight:bold;">border-width</span>: <span style="color:#27aeae;">$size</span> / <span style="color:#f67400;">2</span>

  <span style="color:#27ae60;">@if</span> <span style="color:#27aeae;">$direction</span> == up
    <span style="font-weight:bold;">border-bottom-color</span>: <span style="color:#27aeae;">$color</span>
  <span style="color:#27ae60;">@else</span> <span style="color:#27ae60;">if</span> <span style="color:#27aeae;">$direction</span> == <span style="color:#f67400;">right</span>
    <span style="font-weight:bold;">border-left-color</span>: <span style="color:#27aeae;">$color</span>
  <span style="color:#27ae60;">@else</span> <span style="color:#27ae60;">if</span> <span style="color:#27aeae;">$direction</span> == down
    <span style="font-weight:bold;">border-top-color</span>: <span style="color:#27aeae;">$color</span>
  <span style="color:#27ae60;">@else</span> <span style="color:#27ae60;">if</span> <span style="color:#27aeae;">$direction</span> == <span style="color:#f67400;">left</span>
    <span style="font-weight:bold;">border-right-color</span>: <span style="color:#27aeae;">$color</span>
  <span style="color:#27ae60;">@else</span>
    <span style="color:#27ae60;">@error</span> <span style="color:#f44f4f;">&quot;Unknown direction </span>#{<span style="color:#27aeae;">$direction</span>}<span style="color:#f44f4f;">.&quot;</span>

<span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$size</span> in <span style="color:#27aeae;">$sizes</span>
  <span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$size</span>}
    <span style="font-weight:bold;">font-size</span>: <span style="color:#27aeae;">$size</span>
    <span style="font-weight:bold;">height</span>: <span style="color:#27aeae;">$size</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$size</span>

<span style="color:#27aeae;">$icons</span>: (<span style="color:#f44f4f;">&quot;eye&quot;</span>: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#f44f4f;">&quot;</span>, <span style="color:#f44f4f;">&quot;start&quot;</span>: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#f44f4f;">&quot;</span>, <span style="color:#f44f4f;">&quot;stop&quot;</span>: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#f44f4f;">&quot;</span>)

<span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$name</span>, <span style="color:#27aeae;">$glyph</span> in <span style="color:#27aeae;">$icons</span>
  <span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>}<span style="color:#c45b00;font-style:italic;">:before</span>
    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">inline-block</span>
    <span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Icon Font&quot;</span>
    <span style="font-weight:bold;">content</span>: <span style="color:#27aeae;">$glyph</span>

<span style="color:#27aeae;">$icons</span>: <span style="color:#f44f4f;">&quot;eye&quot;</span> <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#f44f4f;">&quot;</span> <span style="color:#f67400;">12</span><span style="color:#2980b9;">px</span>, <span style="color:#f44f4f;">&quot;start&quot;</span> <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#f44f4f;">&quot;</span> <span style="color:#f67400;">16</span><span style="color:#2980b9;">px</span>, <span style="color:#f44f4f;">&quot;stop&quot;</span> <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#f44f4f;">&quot;</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>

<span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$name</span>, <span style="color:#27aeae;">$glyph</span>, <span style="color:#27aeae;">$size</span> in <span style="color:#27aeae;">$icons</span>
  <span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>}<span style="color:#c45b00;font-style:italic;">:before</span>
    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">inline-block</span>
    <span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Icon Font&quot;</span>
    <span style="font-weight:bold;">content</span>: <span style="color:#27aeae;">$glyph</span>
    <span style="font-weight:bold;">font-size</span>: <span style="color:#27aeae;">$size</span>

<span style="color:#27ae60;">@for</span> <span style="color:#27aeae;">$i</span> from <span style="color:#f67400;">1</span> through <span style="color:#f67400;">3</span>
  ul<span style="color:#c45b00;font-style:italic;">:nth-child(3n + #{$i})</span>
    <span style="font-weight:bold;">background-color</span>: <span style="color:#8e44ad;">lighten(</span><span style="color:#27aeae;">$base-color</span>, <span style="color:#27aeae;">$i</span> * <span style="color:#f67400;">5</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span>

<span style="color:#7a7c7d;">/// Divides `$value` by `$ratio` until it's below `$base`.</span>
<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">scale-below</span>(<span style="color:#27aeae;">$value</span>, <span style="color:#27aeae;">$base</span>, <span style="color:#27aeae;">$ratio</span><span style="color:#da4453;text-decoration:underline;">:</span> <span style="color:#da4453;text-decoration:underline;">1.618</span>)
  <span style="color:#27ae60;">@while</span> <span style="color:#27aeae;">$value</span> &gt; <span style="color:#27aeae;">$base</span>
    <span style="color:#27aeae;">$value</span>: <span style="color:#27aeae;">$value</span> / <span style="color:#27aeae;">$ratio</span>
  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$value</span>

<span style="color:#27ae60;">@namespace</span> svg <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">http://www.w3.org/2000/svg</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@font-face</span>
  <span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Open Sans&quot;</span>
  src: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff2&quot;</span><span style="color:#8e44ad;">)</span>

<span style="color:#27ae60;">@counter-style</span> thumbs
  system: cyclic
  symbols: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#f44f4f;">&quot;</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">sticky-position</span>
  <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">fixed</span>
  <span style="color:#27ae60;">@supports</span> (<span style="font-weight:bold;">position</span>: sticky)
    <span style="font-weight:bold;">position</span>: sticky

<span style="color:#27ae60;">@media</span> (<span style="font-weight:bold;">hover</span>: <span style="color:#f67400;">hover</span>)
  <span style="color:#8e44ad;">.button</span><span style="color:#c45b00;font-style:italic;">:hover</span>
    <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span> <span style="color:#27aeae;font-weight:bold;">black</span>

    <span style="color:#27ae60;">@media</span> (<span style="color:#f67400;">color</span>)
      <span style="font-weight:bold;">border-color</span>: <span style="color:#27aeae;font-weight:bold;">#036</span>

<span style="color:#27ae60;">@keyframes</span> slide-in
  from
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">%</span>


  70%
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">90</span><span style="color:#2980b9;">%</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">150</span><span style="color:#2980b9;">%</span>


  to
    <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">%</span>
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">100</span>  <span style="color:#7a7c7d;">// 100</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">0.8</span>  <span style="color:#7a7c7d;">// 0.8</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">16</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 16px</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 10px*px (read &quot;square pixels&quot;)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">5.2e3</span>  <span style="color:#7a7c7d;">// 5200</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">6e-2</span>  <span style="color:#7a7c7d;">// 0.06</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">4</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">6</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 24px*px (read &quot;square pixels&quot;)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">2</span><span style="color:#2980b9;">s</span>  <span style="color:#7a7c7d;">// 2.5px/s (read &quot;pixels per second&quot;)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">30</span><span style="color:#2980b9;">deg</span> / <span style="color:#f67400;">2</span><span style="color:#2980b9;">s</span> / <span style="color:#f67400;">24</span><span style="color:#2980b9;">em</span>  <span style="color:#7a7c7d;">// 3.125px*deg/s*em</span>
<span style="color:#7a7c7d;">//                                 (read &quot;pixel-degrees per second-em&quot;)</span>

<span style="color:#27aeae;">$degrees-per-second</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">deg</span>/<span style="color:#f67400;">1</span><span style="color:#2980b9;">s</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;">$degrees-per-second</span>  <span style="color:#7a7c7d;">// 20deg/s</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span> / <span style="color:#27aeae;">$degrees-per-second</span>  <span style="color:#7a7c7d;">// 0.05s/deg</span>
<span style="color:#27aeae;">$transition-speed</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">s</span>/<span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">unquote(</span><span style="color:#f44f4f;">&quot;.widget:hover&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// .widget:hover</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">quote(</span><span style="color:#f67400;">bold</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// &quot;bold&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">0.012345678912345</span>  <span style="color:#7a7c7d;">// 0.0123456789</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">0.01234567891</span> == <span style="color:#f67400;">0.01234567899</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1.00000000009</span>  <span style="color:#7a7c7d;">// 1</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">0.99999999991</span>  <span style="color:#7a7c7d;">// 1</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\&quot;</span><span style="color:#f44f4f;">&quot;</span>  <span style="color:#7a7c7d;">// '&quot;'</span>
<span style="color:#27ae60;">@debug</span> \.widget  <span style="color:#7a7c7d;">// \.widget</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\a</span><span style="color:#f44f4f;">&quot;</span>  <span style="color:#7a7c7d;">// &quot;\a&quot; (a string containing only a newline)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;line1</span><span style="color:#3daee9;">\a</span><span style="color:#f44f4f;"> line2&quot;</span>  <span style="color:#7a7c7d;">// &quot;line1\a line2&quot; (foo and bar are separated by a newline)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;Nat + Liz </span><span style="color:#3daee9;">\1F46D</span><span style="color:#f44f4f;">&quot;</span>  <span style="color:#7a7c7d;">// &quot;Nat + Liz 👭&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>  <span style="color:#7a7c7d;">// &quot;Helvetica Neue&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;C:</span><span style="color:#3daee9;">\\</span><span style="color:#f44f4f;">Program Files&quot;</span>  <span style="color:#7a7c7d;">// &quot;C:\\Program Files&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\&quot;</span><span style="color:#f44f4f;">Don't Fear the Reaper</span><span style="color:#3daee9;">\&quot;</span><span style="color:#f44f4f;">&quot;</span>  <span style="color:#7a7c7d;">// &quot;\&quot;Don't Fear the Reaper\&quot;&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;line1</span><span style="color:#3daee9;">\a</span><span style="color:#f44f4f;"> line2&quot;</span>  <span style="color:#7a7c7d;">// &quot;line1\a line2&quot;</span>

<span style="color:#27aeae;">$roboto-variant</span>: <span style="color:#f44f4f;">&quot;Mono&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;Roboto </span>#{<span style="color:#27aeae;">$roboto-variant</span>}<span style="color:#f44f4f;">&quot;</span>  <span style="color:#7a7c7d;">// &quot;Roboto Mono&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">bold</span>  <span style="color:#7a7c7d;">// bold</span>
<span style="color:#27ae60;">@debug</span> -webkit-flex  <span style="color:#7a7c7d;">// -webkit-flex</span>
<span style="color:#27ae60;">@debug</span> --<span style="color:#f67400;">123</span>  <span style="color:#7a7c7d;">// --123</span>

<span style="color:#27aeae;">$prefix</span>: ms
<span style="color:#27ae60;">@debug</span> -#{<span style="color:#27aeae;">$prefix</span>}-flex  <span style="color:#7a7c7d;">// -ms-flex</span>
<span style="color:#27ae60;">@debug</span> \1F46D  <span style="color:#7a7c7d;">// 👭</span>
<span style="color:#27ae60;">@debug</span> \21  <span style="color:#7a7c7d;">// \!</span>
<span style="color:#27ae60;">@debug</span> \7Fx  <span style="color:#7a7c7d;">// \7f x</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">str-length(</span>\7Fx<span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 5</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">str-index(</span><span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, <span style="color:#f44f4f;">&quot;Helvetica&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 1</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">str-index(</span><span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, <span style="color:#f44f4f;">&quot;Neue&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 11</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">str-slice(</span><span style="color:#f44f4f;">&quot;Roboto Mono&quot;</span>, -<span style="color:#f67400;">4</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// &quot;Mono&quot;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;font-weight:bold;">#f2ece4</span> <span style="color:#7a7c7d;">// #f2ece4</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;font-weight:bold;">#b37399aa</span> <span style="color:#7a7c7d;">// rgba(179, 115, 153, 67%)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;font-weight:bold;">midnightblue</span> <span style="color:#7a7c7d;">// #191970</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">rgb(</span><span style="color:#f67400;">204</span>, <span style="color:#f67400;">102</span>, <span style="color:#f67400;">153</span><span style="color:#8e44ad;">)</span> <span style="color:#7a7c7d;">// #c69</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">107</span>, <span style="color:#f67400;">113</span>, <span style="color:#f67400;">127</span>, <span style="color:#f67400;">0.8</span><span style="color:#8e44ad;">)</span> <span style="color:#7a7c7d;">// rgba(107, 113, 127, 0.8)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">hsl(</span><span style="color:#f67400;">228</span>, <span style="color:#f67400;">7</span><span style="color:#2980b9;">%</span>, <span style="color:#f67400;">86</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span> <span style="color:#7a7c7d;">// #dadbdf</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">hsla(</span><span style="color:#f67400;">20</span>, <span style="color:#f67400;">20</span><span style="color:#2980b9;">%</span>, <span style="color:#f67400;">85</span><span style="color:#2980b9;">%</span>, <span style="color:#f67400;">0.7</span><span style="color:#8e44ad;">)</span> <span style="color:#7a7c7d;">// rgb(225, 215, 210, 0.7)</span>
<span style="color:#27aeae;">$venus</span>: <span style="color:#27aeae;font-weight:bold;">#998099</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">scale-color(</span><span style="color:#27aeae;">$venus</span>, <span style="color:#27aeae;">$lightness</span>: +<span style="color:#f67400;">15</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span> <span style="color:#7a7c7d;">// #a893a8</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">mix(</span><span style="color:#27aeae;">$venus</span>, <span style="color:#27aeae;font-weight:bold;">midnightblue</span><span style="color:#8e44ad;">)</span> <span style="color:#7a7c7d;">// #594d85</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">nth(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">12</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">16</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">2</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 12px</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">nth(</span>[line1, line2, line3], -<span style="color:#f67400;">1</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// line3</span>
<span style="color:#27aeae;">$prefixes-by-browser</span>: (<span style="color:#f44f4f;">&quot;firefox&quot;</span>: moz, <span style="color:#f44f4f;">&quot;safari&quot;</span>: webkit, <span style="color:#f44f4f;">&quot;ie&quot;</span>: ms)

<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">prefixes-for-browsers</span>(<span style="color:#27aeae;">$browsers</span>)
  <span style="color:#27aeae;">$prefixes</span>: ()
  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$browser</span> in <span style="color:#27aeae;">$browsers</span>
    <span style="color:#27aeae;">$prefixes</span>: <span style="color:#8e44ad;">append(</span><span style="color:#27aeae;">$prefixes</span>, <span style="color:#8e44ad;">map-get(</span><span style="color:#27aeae;">$prefixes-by-browser</span>, <span style="color:#27aeae;">$browser</span><span style="color:#8e44ad;">))</span>

  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$prefixes</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">prefixes-for-browsers(</span><span style="color:#f44f4f;">&quot;firefox&quot;</span> <span style="color:#f44f4f;">&quot;ie&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// moz ms</span>
<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">syntax-colors</span>(<span style="color:#27aeae;">$args</span>...)
  <span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">keywords(</span><span style="color:#27aeae;">$args</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// (string: #080, comment: #800, $variable: $60b)</span>

  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$name</span>, <span style="color:#27aeae;">$color</span> in <span style="color:#8e44ad;">keywords(</span><span style="color:#27aeae;">$args</span><span style="color:#8e44ad;">)</span>
    pre span<span style="color:#8e44ad;">.stx-</span>#{<span style="color:#27aeae;">$name</span>}
      <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$color</span>

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">syntax-colors(</span><span style="color:#27aeae;">$string</span>: <span style="color:#27aeae;font-weight:bold;">#080</span>, <span style="color:#27aeae;">$comment</span>: <span style="color:#27aeae;font-weight:bold;">#800</span>, <span style="color:#27aeae;">$variable</span>: <span style="color:#27aeae;font-weight:bold;">#60b</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27aeae;">$font-weights</span>: (<span style="color:#f44f4f;">&quot;regular&quot;</span>: <span style="color:#f67400;">400</span>, <span style="color:#f44f4f;">&quot;medium&quot;</span>: <span style="color:#f67400;">500</span>, <span style="color:#f44f4f;">&quot;bold&quot;</span>: <span style="color:#f67400;">700</span>)

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">map-get(</span><span style="color:#27aeae;">$font-weights</span>, <span style="color:#f44f4f;">&quot;medium&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 500</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">map-get(</span><span style="color:#27aeae;">$font-weights</span>, <span style="color:#f44f4f;">&quot;extra-bold&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// null</span>
<span style="color:#27aeae;">$icons</span>: (<span style="color:#f44f4f;">&quot;eye&quot;</span>: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#f44f4f;">&quot;</span>, <span style="color:#f44f4f;">&quot;start&quot;</span>: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#f44f4f;">&quot;</span>, <span style="color:#f44f4f;">&quot;stop&quot;</span>: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#f44f4f;">&quot;</span>)

<span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$name</span>, <span style="color:#27aeae;">$glyph</span> in <span style="color:#27aeae;">$icons</span>
  <span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>}<span style="color:#c45b00;font-style:italic;">:before</span>
    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">inline-block</span>
    <span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Icon Font&quot;</span>
    <span style="font-weight:bold;">content</span>: <span style="color:#27aeae;">$glyph</span>

<span style="color:#27aeae;">$prefixes-by-browser</span>: (<span style="color:#f44f4f;">&quot;firefox&quot;</span>: moz, <span style="color:#f44f4f;">&quot;safari&quot;</span>: webkit, <span style="color:#f44f4f;">&quot;ie&quot;</span>: ms)

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">add-browser-prefix</span>(<span style="color:#27aeae;">$browser</span>, <span style="color:#27aeae;">$prefix</span>)
  <span style="color:#27aeae;">$prefixes-by-browser</span>: <span style="color:#8e44ad;">map-merge(</span><span style="color:#27aeae;">$prefixes-by-browser</span>, (<span style="color:#27aeae;">$browser</span>: <span style="color:#27aeae;">$prefix</span><span style="color:#8e44ad;">)</span>)

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">add-browser-prefix(</span><span style="color:#f44f4f;">&quot;opera&quot;</span>, o<span style="color:#8e44ad;">)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;">$prefixes-by-browser</span>
<span style="color:#7a7c7d;">// (&quot;firefox&quot;: moz, &quot;safari&quot;: webkit, &quot;ie&quot;: ms, &quot;opera&quot;: o)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> == <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// false</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> == <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> &lt; <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// false</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">comparable(</span><span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">3</span><span style="color:#2980b9;">in</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">str-index(</span><span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, <span style="color:#f44f4f;">&quot;Roboto&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// null</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">map-get(</span>(<span style="color:#f44f4f;">&quot;large&quot;</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>, <span style="color:#f44f4f;">&quot;small&quot;</span>)  <span style="color:#7a7c7d;">// null</span>
<span style="color:#27ae60;">@debug</span> &amp;  <span style="color:#7a7c7d;">// null</span>
<span style="color:#27aeae;">$fonts</span>: (<span style="color:#f44f4f;">&quot;serif&quot;</span>: <span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, <span style="color:#f44f4f;">&quot;monospace&quot;</span>: <span style="color:#f44f4f;">&quot;Consolas&quot;</span>)

h3
  <span style="font-weight:bold;">font</span>: <span style="color:#f67400;">18</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">bold</span> <span style="color:#8e44ad;">map-get(</span><span style="color:#27aeae;">$fonts</span>, <span style="color:#f44f4f;">&quot;sans&quot;</span><span style="color:#8e44ad;">)</span>

<span style="color:#27aeae;">$fonts</span>: (<span style="color:#f44f4f;">&quot;serif&quot;</span>: <span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, <span style="color:#f44f4f;">&quot;monospace&quot;</span>: <span style="color:#f44f4f;">&quot;Consolas&quot;</span>)

h3
  <span style="font-weight:bold;">font</span>:
    <span style="font-weight:bold;">size</span>: <span style="color:#f67400;">18</span><span style="color:#2980b9;">px</span>
    <span style="font-weight:bold;">weight</span>: <span style="color:#f67400;">bold</span>
    <span style="font-weight:bold;">family</span>: <span style="color:#8e44ad;">map-get(</span><span style="color:#27aeae;">$fonts</span>, <span style="color:#f44f4f;">&quot;sans&quot;</span><span style="color:#8e44ad;">)</span>

copy of $list with all elements for which $condition returns `true`
<span style="color:#7a7c7d;">/// removed.</span>
<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">remove-where</span>(<span style="color:#27aeae;">$list</span>, <span style="color:#27aeae;">$condition</span>)
  <span style="color:#27aeae;">$new-list</span>: ()
  <span style="color:#27aeae;">$separator</span>: <span style="color:#8e44ad;">list-separator(</span><span style="color:#27aeae;">$list</span><span style="color:#8e44ad;">)</span>
  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$element</span> in <span style="color:#27aeae;">$list</span>
    <span style="color:#27ae60;">@if</span> not <span style="color:#8e44ad;">call(</span><span style="color:#27aeae;">$condition</span>, <span style="color:#27aeae;">$element</span><span style="color:#8e44ad;">)</span>
      <span style="color:#27aeae;">$new-list</span>: <span style="color:#8e44ad;">append(</span><span style="color:#27aeae;">$new-list</span>, <span style="color:#27aeae;">$element</span>, <span style="color:#27aeae;">$separator</span>: <span style="color:#27aeae;">$separator</span><span style="color:#8e44ad;">)</span>

  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$new-list</span>

<span style="color:#27aeae;">$fonts</span>: Tahoma, Geneva, <span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, Helvetica, Arial, <span style="color:#f67400;">sans-serif</span>

content
  <span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">contains-helvetica</span>(<span style="color:#27aeae;">$string</span>)
    <span style="color:#27ae60;">@return</span> <span style="color:#8e44ad;">str-index(</span><span style="color:#27aeae;">$string</span>, <span style="color:#f44f4f;">&quot;Helvetica&quot;</span><span style="color:#8e44ad;">)</span>

  <span style="font-weight:bold;">font-family</span>: <span style="color:#8e44ad;">remove-where(</span><span style="color:#27aeae;">$fonts</span>, <span style="color:#8e44ad;">get-function(</span><span style="color:#f44f4f;">&quot;contains-helvetica&quot;</span><span style="color:#8e44ad;">))</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> == <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#2980b9;">!</span>= <span style="color:#f67400;">1</span><span style="color:#2980b9;">em</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span> <span style="color:#2980b9;">!</span>= <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">96</span><span style="color:#2980b9;">px</span> == <span style="color:#f67400;">1</span><span style="color:#2980b9;">in</span>  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;Helvetica&quot;</span> == Helvetica  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;Helvetica&quot;</span> <span style="color:#2980b9;">!</span>= <span style="color:#f44f4f;">&quot;Arial&quot;</span>  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">hsl(</span><span style="color:#f67400;">34</span>, <span style="color:#f67400;">35</span><span style="color:#2980b9;">%</span>, <span style="color:#f67400;">92.1</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span> == <span style="color:#27aeae;font-weight:bold;">#f2ece4</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">179</span>, <span style="color:#f67400;">115</span>, <span style="color:#f67400;">153</span>, <span style="color:#f67400;">0.5</span><span style="color:#8e44ad;">)</span> <span style="color:#2980b9;">!</span>= <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">179</span>, <span style="color:#f67400;">115</span>, <span style="color:#f67400;">153</span>, <span style="color:#f67400;">0.8</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">7</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>) == (<span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">7</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>)  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">7</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>) <span style="color:#2980b9;">!</span>= (<span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">14</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>)  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">7</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>) <span style="color:#2980b9;">!</span>= (<span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">7</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>)  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">7</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>) <span style="color:#2980b9;">!</span>= [<span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">7</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>]  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27aeae;">$theme</span>: (<span style="color:#f44f4f;">&quot;venus&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#998099</span>, <span style="color:#f44f4f;">&quot;nebula&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#d2e1dd</span>)
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;">$theme</span> == (<span style="color:#f44f4f;">&quot;venus&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#998099</span>, <span style="color:#f44f4f;">&quot;nebula&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#d2e1dd</span>)  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;">$theme</span> <span style="color:#2980b9;">!</span>= (<span style="color:#f44f4f;">&quot;venus&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#998099</span>, <span style="color:#f44f4f;">&quot;iron&quot;</span>: <span style="color:#27aeae;font-weight:bold;">#dadbdf</span>)  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">true</span> == <span style="color:#7f8c8d;">true</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">true</span> <span style="color:#2980b9;">!</span>= <span style="color:#7f8c8d;">false</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">null</span> <span style="color:#2980b9;">!</span>= <span style="color:#7f8c8d;">false</span>  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">get-function(</span><span style="color:#f44f4f;">&quot;rgba&quot;</span><span style="color:#8e44ad;">)</span> == <span style="color:#8e44ad;">get-function(</span><span style="color:#f44f4f;">&quot;rgba&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">get-function(</span><span style="color:#f44f4f;">&quot;rgba&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#2980b9;">!</span>= <span style="color:#8e44ad;">get-function(</span><span style="color:#f44f4f;">&quot;hsla&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">s</span> + <span style="color:#f67400;">15</span><span style="color:#2980b9;">s</span>  <span style="color:#7a7c7d;">// 25s</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">in</span> - <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 0.8958333333in</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 15px*px</span>
<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">12</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">4</span><span style="color:#2980b9;">px</span>)  <span style="color:#7a7c7d;">// 3</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">in</span> % <span style="color:#f67400;">9</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 0.0625in</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 15px/30px</span>
<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> + <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span>) / <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 0.5</span>

<span style="color:#27aeae;">$result</span>: <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;">$result</span>  <span style="color:#7a7c7d;">// 0.5</span>

<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">fifteen-divided-by-thirty</span>()
  <span style="color:#27ae60;">@return</span> <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">fifteen-divided-by-thirty()</span>  <span style="color:#7a7c7d;">// 0.5</span>

<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>)  <span style="color:#7a7c7d;">// 0.5</span>
<span style="color:#27ae60;">@debug</span> (<span style="color:#f67400;">bold</span> <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">sans-serif</span>)  <span style="color:#7a7c7d;">// bold 15px/30px sans-serif</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span> + <span style="color:#f67400;">1</span>  <span style="color:#7a7c7d;">// 1.5</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">4</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">6</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 24px*px (read &quot;square pixels&quot;)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">2</span><span style="color:#2980b9;">s</span>  <span style="color:#7a7c7d;">// 2.5px/s (read &quot;pixels per second&quot;)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">30</span><span style="color:#2980b9;">deg</span> / <span style="color:#f67400;">2</span><span style="color:#2980b9;">s</span> / <span style="color:#f67400;">24</span><span style="color:#2980b9;">em</span>  <span style="color:#7a7c7d;">// 3.125px*deg/s*em</span>
<span style="color:#7a7c7d;">//                                 (read &quot;pixel-degrees per second-em&quot;)</span>

<span style="color:#27aeae;">$degrees-per-second</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">deg</span>/<span style="color:#f67400;">1</span><span style="color:#2980b9;">s</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#27aeae;">$degrees-per-second</span>  <span style="color:#7a7c7d;">// 20deg/s</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1</span> / <span style="color:#27aeae;">$degrees-per-second</span>  <span style="color:#7a7c7d;">// 0.05s/deg</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">100</span> &gt; <span style="color:#f67400;">50</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> &lt; <span style="color:#f67400;">17</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">96</span><span style="color:#2980b9;">px</span> &gt;= <span style="color:#f67400;">1</span><span style="color:#2980b9;">in</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">1000</span><span style="color:#2980b9;">ms</span> &lt;= <span style="color:#f67400;">1</span><span style="color:#2980b9;">s</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;Helvetica&quot;</span> + <span style="color:#f44f4f;">&quot; Neue&quot;</span>  <span style="color:#7a7c7d;">// &quot;Helvetica Neue&quot;</span>
<span style="color:#27ae60;">@debug</span> sans- + <span style="color:#f67400;">serif</span>  <span style="color:#7a7c7d;">// sans-serif</span>
<span style="color:#27ae60;">@debug</span> #{<span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> + <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span>} / <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// 15px/30px</span>
<span style="color:#27ae60;">@debug</span> sans - <span style="color:#f67400;">serif</span>  <span style="color:#7a7c7d;">// sans-serif</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#f44f4f;">&quot;Elapsed time: &quot;</span> + <span style="color:#f67400;">10</span><span style="color:#2980b9;">s</span>  <span style="color:#7a7c7d;">// &quot;Elapsed time: 10s&quot;;</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">true</span> + <span style="color:#f44f4f;">&quot; is a boolean value&quot;</span>  <span style="color:#7a7c7d;">// &quot;true is a boolean value&quot;;</span>

<span style="color:#27ae60;">@debug</span> / <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span>  <span style="color:#7a7c7d;">// /15px</span>
<span style="color:#27ae60;">@debug</span> - moz  <span style="color:#7a7c7d;">// -moz</span>
<span style="color:#27ae60;">@debug</span> <span style="font-weight:bold;">not</span> <span style="color:#7f8c8d;">true</span>  <span style="color:#7a7c7d;">// false</span>
<span style="color:#27ae60;">@debug</span> <span style="font-weight:bold;">not</span> <span style="color:#7f8c8d;">false</span>  <span style="color:#7a7c7d;">// true</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">true</span> <span style="font-weight:bold;">and</span> <span style="color:#7f8c8d;">true</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">true</span> <span style="font-weight:bold;">and</span> <span style="color:#7f8c8d;">false</span>  <span style="color:#7a7c7d;">// false</span>

<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">true</span> or <span style="color:#7f8c8d;">false</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#7f8c8d;">false</span> or <span style="color:#7f8c8d;">false</span>  <span style="color:#7a7c7d;">// false</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">var(</span><span style="color:#27aeae;">--main-bg-color</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// var(--main-bg-color)</span>

<span style="color:#27aeae;">$primary</span>: <span style="color:#27aeae;font-weight:bold;">#f2ece4</span>
<span style="color:#27aeae;">$accent</span>: <span style="color:#27aeae;font-weight:bold;">#e1d7d2</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">radial-gradient(</span><span style="color:#27aeae;">$primary</span>, <span style="color:#27aeae;">$accent</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// radial-gradient(#f2ece4, #e1d7d2)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">str-index(</span><span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, <span style="color:#f44f4f;">&quot;Helvetica&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 1</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">str-index(</span><span style="color:#f44f4f;">&quot;Helvetica Neue&quot;</span>, <span style="color:#f44f4f;">&quot;Neue&quot;</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 11</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">comparable(</span><span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">comparable(</span><span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">3</span><span style="color:#2980b9;">em</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// false</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">comparable(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">cm</span>, <span style="color:#f67400;">3</span><span style="color:#2980b9;">mm</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// true</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">append(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 10px 20px 30px</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">append(</span>(<span style="color:#27aeae;font-weight:bold;">blue</span>, <span style="color:#27aeae;font-weight:bold;">red</span><span style="color:#8e44ad;">)</span>, <span style="color:#27aeae;font-weight:bold;">green</span>)  <span style="color:#7a7c7d;">// blue, red, green</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">append(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">40</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 10px 20px (30px 40px)</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">append(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>, <span style="color:#27aeae;">$separator</span>: comma<span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 10px, 20px</span>
<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">append(</span>(<span style="color:#27aeae;font-weight:bold;">blue</span>, <span style="color:#27aeae;font-weight:bold;">red</span><span style="color:#8e44ad;">)</span>, <span style="color:#27aeae;font-weight:bold;">green</span>, <span style="color:#27aeae;">$separator</span>: space)  <span style="color:#7a7c7d;">// blue red green</span>
<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">syntax-colors</span>(<span style="color:#27aeae;">$args</span>...)
  <span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">keywords(</span><span style="color:#27aeae;">$args</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// (string: #080, comment: #800, $variable: $60b)</span>

  <span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$name</span>, <span style="color:#27aeae;">$color</span> in <span style="color:#8e44ad;">keywords(</span><span style="color:#27aeae;">$args</span><span style="color:#8e44ad;">)</span>
    pre span<span style="color:#8e44ad;">.stx-</span>#{<span style="color:#27aeae;">$name</span>}
      <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$color</span>

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">syntax-colors(</span><span style="color:#27aeae;">$string</span>: <span style="color:#27aeae;font-weight:bold;">#080</span>, <span style="color:#27aeae;">$comment</span>: <span style="color:#27aeae;font-weight:bold;">#800</span>, <span style="color:#27aeae;">$variable</span>: <span style="color:#27aeae;font-weight:bold;">#60b</span><span style="color:#8e44ad;">)</span>;

<span style="color:#27aeae;">$font-weights</span>: (<span style="color:#f44f4f;">&quot;regular&quot;</span>: <span style="color:#f67400;">400</span>, <span style="color:#f44f4f;">&quot;medium&quot;</span>: <span style="color:#f67400;">500</span>, <span style="color:#f44f4f;">&quot;bold&quot;</span>: <span style="color:#f67400;">700</span>)

<span style="color:#27ae60;">@debug</span> <span style="color:#8e44ad;">map-values(</span><span style="color:#27aeae;">$font-weights</span><span style="color:#8e44ad;">)</span>  <span style="color:#7a7c7d;">// 400, 500, 700</span>

<span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>}
  <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">absolute</span>
  #{<span style="color:#27aeae;">$top-or-bottom</span>}: <span style="color:#f67400;">0</span>
  -#{<span style="color:#27aeae;">$prefix</span>}-#{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$value</span>
  <span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>}
    <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">absolute</span>
    #{<span style="color:#27aeae;">$top-or-bottom</span>}: <span style="color:#f67400;">0</span>
    -#{<span style="color:#27aeae;">$prefix</span>}-#{<span style="color:#27aeae;">$property</span>}-image: <span style="color:#27aeae;">$value</span>
</pre></body></html>
